{% load staticfiles %}

<div class="modal fade" id="text_modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑
                </h4>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <label>元素名称：</label>
                        <label id="id_svg_id"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <textarea id="id_svg_text" class="form-control markdown" style="height: 350px;width: 100%"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div id="id_text_change_panel" class="alert alert-success alert-dismissable hide">
                        <button type="button" class="close" id="id_info_close">
                            ×
                        </button>
                        修改成功
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button id="id_apply_text_change" class="btn btn-primary active">应用更改</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{% static 'css/jquery.markdownify.css' %}">
{#<link rel='stylesheet' href="https://cdn.rawgit.com/marijnh/CodeMirror/master/lib/codemirror.css">#}
{#<script src="https://cdn.rawgit.com/tibastral/markdownify/master/vendor/jquery.min.js"></script>#}
{#<script src="https://cdn.rawgit.com/marijnh/CodeMirror/master/lib/codemirror.js"></script>#}
{#<script src="https://cdn.rawgit.com/marijnh/CodeMirror/master/addon/edit/continuelist.js"></script>#}
{#<script src='https://cdn.rawgit.com/chjj/marked/master/lib/marked.js' type='text/javascript'></script>#}
{#<script src="https://cdn.rawgit.com/marijnh/CodeMirror/master/mode/xml/xml.js"></script>#}
{#<script src="https://cdn.rawgit.com/marijnh/CodeMirror/master/mode/markdown/markdown.js"></script>#}
<script src="{% static "js/jquery.markdownify.js" %}"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $('#text_modal').on('shown.bs.modal', function () {
            $(".CodeMirror").remove()
            $('.markdown').markdownify();
        });
        $("#id_apply_text_change").on('click', function () {
            var text_svg_id = $("#id_svg_id").text().trim();
            var text_svg_content = $("#id_svg_text").val().trim();
            $("#" + text_svg_id).html(text_svg_content);
            $("#id_text_change_panel").removeClass("hide");
        });
        $("#id_info_close").on('click', function () {
            $("#id_text_change_panel").addClass("hide");
        });
    });
</script>